[username]/page.tsx - 用户资料页

[username]/page.tsx - 用户资料页

基本信息

属性
路径src/app/[username]/page.tsx
类型Next.js 动态路由页面 (Server Component)
功能用户个人资料展示页面

功能描述

展示用户的个人资料信息,包括提示词列表、贡献记录、点赞内容、示例提交和变更请求。支持多标签页浏览、日期筛选和固定提示词展示。

导入依赖

import { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { getTranslations, getLocale } from "next-intl/server";
import { formatDistanceToNow } from "@/lib/date";
import { getPromptUrl } from "@/lib/urls";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import config from "@/../prompts.config";
// UI 组件...

Props 接口

interface UserProfilePageProps {
  params: Promise<{ username: string }>;
  searchParams: Promise<{ page?: string; tab?: string; date?: string }>;
}
参数类型说明
params.usernamestring用户名(格式: @username
searchParams.pagestring分页页码
searchParams.tabstring当前标签页
searchParams.datestring日期筛选 (YYYY-MM-DD)

元数据生成

generateMetadata({ params })

URL 格式验证:

  • 仅支持 /@username 格式
  • 不以 @ 开头的用户名返回 "User Not Found"

元数据内容:

{
  title: "${user.name || user.username} (@${user.username})",
  description: "View ${user.name || user.username}'s prompts"
}

数据获取

用户查询

const user = await db.user.findFirst({
  where: { username: { equals: username, mode: "insensitive" } },
  select: {
    id, name, username, email, avatar, role, verified,
    createdAt, bio, customLinks,
    _count: { prompts, contributions }
  }
});

并行数据获取

数据项说明限制
promptsRaw用户的提示词分页 24/页
total提示词总数-
totalUpvotes收到的总点赞数-
pinnedPromptsRaw固定的提示词-
contributionsRaw贡献的提示词最多 50
likedPromptsRaw点赞的提示词最多 50
userExamplesRaw提交示例的提示词最多 50
privatePromptsCount私有提示词数量仅主人可见
activity*活动数据(4类)最近12个月

活动统计

计算过去12个月的每日活动数量:

  • 创建的提示词
  • 给出的点赞
  • 提交的变更请求
  • 发表的评论

标签页系统

标签值显示名称内容
prompts提示词用户的所有提示词
contributions贡献作为贡献者参与的提示词
likes点赞用户点赞的提示词
examples示例提交过示例的提示词
changes变更请求提交/收到的变更请求

变更请求状态

状态颜色映射

const statusColors = {
  PENDING:  "bg-yellow-500/10 text-yellow-600",
  APPROVED: "bg-green-500/10 text-green-600",
  REJECTED: "bg-red-500/10 text-red-600",
};

变更请求类型

类型说明
submitted用户提交的变更请求
received用户收到的变更请求

UI 结构

Container
├── Profile Header
│   ├── Avatar + Name + Badges (verified, admin)
│   ├── Bio + Social Links
│   └── Stats (prompts, upvotes, contributions, joined)
├── Activity Chart
└── Tabs
    ├── prompts: 日期筛选 + 固定提示词 + 列表
    ├── contributions: 贡献列表
    ├── likes: 点赞列表 (Masonry)
    ├── examples: 示例列表
    └── changes: 变更请求列表

权限控制

功能主人访客
查看私有提示词
编辑资料按钮
看到待处理变更数
查看未认领标识
验证徽章获取✅(未验证时)

特殊状态

未认领用户

当用户邮箱以 @unclaimed.prompts.chat 结尾时,显示 "未认领" 标识。

日期筛选

支持按日期筛选提示词,格式 YYYY-MM-DD,URL 参数 ?date=2024-01-15

翻译命名空间

  • user - 用户相关文本
  • changeRequests - 变更请求相关
  • prompts - 提示词相关

MCP 集成

config.features.mcp !== false 时显示 MCP 服务器弹窗。

← 返回目录